<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>对账查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/my/fund/index.css"/>
    <script src="../../js/statistics.js"></script>
    <script src="../../js/fontset.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">对账查询</h1>
</header>
<div class="mui-content">
	<div class="datePicker">
		<div class="mui-icon mui-icon-arrowleft"></div>
		<div class="datePicker-date"><span></span>年</div>
		<div class="mui-icon mui-icon-arrowright"></div>
	</div>
	<div id="statement">
		
	</div>
</div>	

<script type="text/javascript" src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../plugins/mui/mui.min.js"></script>
<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script src="../../plugins/template/template.js" ></script>
<script src="../../js/life_housekeeper/windowTitleView.js"></script>
<script type="text/html" id="statementTpl">
	<div class="card-list">
		<div class="card-list-content">
			<div class="content-cell">
				<span>职工姓名</span>
				<span>{{spname}}</span>
			</div>
			<div class="content-cell">
				<span>期初余额</span>
				<span>{{qcye}}</span>
			</div>
			<div class="content-cell">
				<span>当年缴存</span>
				<span>{{jc}}</span>
			</div>
			<div class="content-cell">
				<span>年度结息</span>
				<span>{{lx}}</span>
			</div>
			<div class="content-cell">
				<span>当年提取</span>
				<span>{{tq}}</span>
			</div>
			<div class="content-cell">
				<span>缴存余额</span>
				<span>{{qmye}}</span>
			</div>
			<div class="content-cell">
				<span class="mui-col-xs-4">日期范围</span>
				<span class="mui-text-right mui-col-xs-8">{{rqfw}}</span>
			</div>
		</div>
	</div>
</script>
<script type="text/javascript">
	mui.init();
	mui.plusReady(function(){
		var self = plus.webview.currentWebview(),
			gjjnf = self.time,
		   spcode = self.spcode;
		    searchNf = parseInt(gjjnf) - 1;
		    mui('.datePicker-date span')[0].innerText = gjjnf;
		var data ={
			spCode:spcode,
			gjjnf:searchNf,
			ywlx:1
		};
		getStatementInfo(data);
		mui('.datePicker').on('tap','.mui-icon',function(e){
			var _this = this,
			 	classList = _this.classList,
			 	year = parseInt(mui('.datePicker-date span')[0].innerText);
			if(classList.contains('mui-icon-arrowright')){
				if(year >= gjjnf ){
					return;
				}else{
					year++ ;
					mui('.datePicker-date span')[0].innerText = year;
					var data = {
						spCode:spcode,
						gjjnf:year - 1,
						ywlx:1
					}
					getStatementInfo(data);
				}
			}else if(classList.contains('mui-icon-arrowleft')){
				year-- ;
				mui('.datePicker-date span')[0].innerText = year;
				var data = {
					spCode:spcode,
					gjjnf:year - 1,
					ywlx:1
				}
				getStatementInfo(data);
			}
		})
	});
	
	
	/**
	 * @description 对账查询接口
	 * @constructor
	 * @param {Object} data 请求参数 
	 */
	function getStatementInfo(data){
		plus.nativeUI.showWaiting();
		myAjax('home/provident/getStatementInfo','post',data,function(e){
			plus.nativeUI.closeWaiting();
			if(e.code == 0){
				if(!e.data.body || e.data.body == ''){
					return;
				}
				var statementInfo = e.data.body.list.acc_info[0],
					statement = document.getElementById("statement"),
					statementHtml = template('statementTpl',statementInfo);
					statement.innerHTML = statementHtml;
			}else{
				mui.toast(e.message);
			}
		})
	}
</script>
</body>
</html>
